<template>
	<u-tabbar style="height:158rpx" class="shadow" zIndex="97" :value="name" @change="tabChange"
		:fixed="fixed !== false" :placeholder="fixed !== false" activeColor="#1B1b1b" inactiveColor="#999999">
		<u-tabbar-item text="首页" name="/pages/index/index">
			<template #active-icon>
				<image class="icon" src="/static/common/tabBar/a1.png"></image>
			</template>
			<template #inactive-icon>
				<image class="icon" src="/static/common/tabBar/a.png"></image>
			</template>
		</u-tabbar-item>
		
		<template v-if="isShowBaoxian">
			<u-tabbar-item text="保险" name="/pages/main/baoxian">
				<template #active-icon>
					<image class="icon" src="/static/common/tabBar/b1.png"></image>
				</template>
				<template #inactive-icon>
					<image class="icon" src="/static/common/tabBar/b.png"></image>
				</template>
			</u-tabbar-item>
		</template>

		<u-tabbar-item text="验车" name="/pages/main/yanche">
			<template #active-icon>
				<image class="icon" src="/static/common/tabBar/c1.png"></image>
			</template>
			<template #inactive-icon>
				<image class="icon" src="/static/common/tabBar/c.png"></image>
			</template>
		</u-tabbar-item>


		<u-tabbar-item text="我的" name="/pages/main/my">
			<template #active-icon>
				<image class="icon" src="/static/common/tabBar/d1.png"></image>
			</template>
			<template #inactive-icon>
				<image class="icon" src="/static/common/tabBar/d.png"></image>
			</template>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script setup>
	let props = defineProps({
		num: {
			type: Number,
			default: 0
		},
		name: {
			type: String,
			default: '/pages/index/index',
		},
		fixed: {
			type: Boolean,
			default: false
		},
		isShowBaoxian: {
			type: Boolean,
			default: false
		}
	})
	const tabChange = (e) => {
		uni.switchTab({
			url: e,
		})
	}
</script>

<style lang="scss" scoped>
	.absolute {
		position: absolute;
	}

	.icon {
		height: 50rpx;
		width: 50rpx;
	}

	.sheji {
		width: 90rpx;
		height: 90rpx;
		bottom: 0;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	:deep(.u-tabbar__content__item-wrapper) {
		height: 158rpx !important;
		box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.08) !important;
	}


	:deep(.u-tabbar-item__text) {
		font-size: 24rpx;
		margin-top: 6px;
	}

	:deep(.u-border-top) {
		border-top-style: none
	}

	:deep(.u-tabbar) {
		height: 60px !important;
	}

	:deep(.u-popup__content) {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.aci {
		position: relative;

		text {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #f00000;
			font-weight: 400;
			font-size: 22rpx;
			color: #ffffff;
			line-height: 30rpx;
			text-align: center;
			position: absolute;
			top: -8rpx;
			right: -16rpx;
			z-index: 20;
		}
	}

	.icon-b {
		position: relative;


		.num {
			position: absolute;
			top: -8rpx;
			right: -16rpx;
			z-index: 20;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #f00000;
			font-weight: 400;
			font-size: 22rpx;
			color: #ffffff;
			line-height: 30rpx;
			text-align: center;
		}
	}
</style>